<template>
	<view class="collection">
		<view class="header">
			<text class="title">收藏夹</text>
			<text class="edit-btn" @click="toggleEdit">{{ isEditing ? '完成' : '编辑' }}</text>
		</view>
		
		<view class="filter-tabs">
			<view 
				v-for="tab in filterTabs" 
				:key="tab.id"
				class="filter-tab"
				:class="{ active: activeFilter === tab.id }"
				@click="switchFilter(tab.id)"
			>
				<text>{{ tab.name }}</text>
			</view>
		</view>
		
		<view class="collection-list">
			<view v-if="filteredItems.length === 0" class="empty-state">
				<image class="empty-image" src="/static/muyuadmin/NoCard_3.png" mode="aspectFit"></image>
				<text class="empty-text">暂无收藏内容</text>
				<button class="browse-btn" @click="goBrowse">去逛逛</button>
			</view>
			
			<view v-else class="items-grid">
				<view 
					v-for="item in filteredItems" 
					:key="item.id"
					class="collection-item"
					@click="viewItem(item)"
				>
					<image class="item-image" :src="item.image" mode="aspectFill"></image>
					<view class="item-info">
						<text class="item-name">{{ item.name }}</text>
						<text class="item-price">¥{{ item.price }}</text>
						<text class="item-time">{{ item.collectTime }}</text>
					</view>
					<view v-if="isEditing" class="delete-btn" @click.stop="deleteItem(item.id)">
						<text>×</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 批量操作栏 -->
		<view v-if="isEditing" class="batch-actions">
			<view class="select-all">
				<checkbox-group @change="toggleSelectAll">
					<label class="checkbox-label">
						<checkbox :checked="isAllSelected" />
						<text>全选</text>
					</label>
				</checkbox-group>
			</view>
			<view class="action-buttons">
				<button class="batch-delete" @click="batchDelete">删除</button>
				<button class="batch-clear" @click="clearAll">清空</button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue'

const isEditing = ref(false)
const activeFilter = ref(1)
const selectedItems = ref(new Set())

const filterTabs = ref([
	{ id: 1, name: '全部' },
	{ id: 2, name: '商品' },
	{ id: 3, name: '店铺' }
])

const collectionItems = ref([
	{
		id: 1,
		type: 'product',
		name: '经典拿铁咖啡',
		price: 28,
		image: '/static/goods/goods05.jpg',
		collectTime: '2024-01-15'
	},
	{
		id: 2,
		type: 'product',
		name: '美味蛋糕',
		price: 48,
		image: '/static/goods/goods06.jpg',
		collectTime: '2024-01-14'
	},
	{
		id: 3,
		type: 'shop',
		name: '星巴克咖啡店',
		price: null,
		image: '/static/goods/goods07.jpg',
		collectTime: '2024-01-10'
	},
	{
		id: 4,
		type: 'product',
		name: '抹茶拿铁',
		price: 32,
		image: '/static/goods/goods08.jpg',
		collectTime: '2024-01-08'
	}
])

const filteredItems = computed(() => {
	if (activeFilter.value === 1) {
		return collectionItems.value
	} else if (activeFilter.value === 2) {
		return collectionItems.value.filter(item => item.type === 'product')
	} else {
		return collectionItems.value.filter(item => item.type === 'shop')
	}
})

const isAllSelected = computed(() => {
	return selectedItems.value.size === filteredItems.value.length && filteredItems.value.length > 0
})

const toggleEdit = () => {
	isEditing.value = !isEditing.value
	if (!isEditing.value) {
		selectedItems.value.clear()
	}
}

const switchFilter = (filterId) => {
	activeFilter.value = filterId
	selectedItems.value.clear()
}

const viewItem = (item) => {
	if (isEditing.value) return
	
	if (item.type === 'product') {
		uni.navigateTo({
			url: '/pages_order/orderInfo/index'
		})
	} else {
		uni.showToast({
			title: '查看店铺详情',
			icon: 'none'
		})
	}
}

const deleteItem = (itemId) => {
	uni.showModal({
		title: '确认删除',
		content: '确定要删除这个收藏吗？',
		success: (res) => {
			if (res.confirm) {
				collectionItems.value = collectionItems.value.filter(item => item.id !== itemId)
				selectedItems.value.delete(itemId)
				uni.showToast({
					title: '删除成功',
					icon: 'success'
				})
			}
		}
	})
}

const toggleSelectAll = () => {
	if (isAllSelected.value) {
		selectedItems.value.clear()
	} else {
		filteredItems.value.forEach(item => {
			selectedItems.value.add(item.id)
		})
	}
}

const batchDelete = () => {
	if (selectedItems.value.size === 0) {
		uni.showToast({
			title: '请选择要删除的项目',
			icon: 'none'
		})
		return
	}
	
	uni.showModal({
		title: '批量删除',
		content: `确定要删除选中的 ${selectedItems.value.size} 个项目吗？`,
		success: (res) => {
			if (res.confirm) {
				collectionItems.value = collectionItems.value.filter(item => !selectedItems.value.has(item.id))
				selectedItems.value.clear()
				uni.showToast({
					title: '删除成功',
					icon: 'success'
				})
			}
		}
	})
}

const clearAll = () => {
	uni.showModal({
		title: '清空收藏',
		content: '确定要清空所有收藏吗？此操作不可撤销',
		success: (res) => {
			if (res.confirm) {
				collectionItems.value = []
				selectedItems.value.clear()
				uni.showToast({
					title: '清空成功',
					icon: 'success'
				})
			}
		}
	})
}

const goBrowse = () => {
	uni.switchTab({
		url: '/pages/index/index'
	})
}
</script>

<style scoped>
.collection {
	background: #f5f5f5;
	min-height: 100vh;
	padding: 20rpx;
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 30rpx 0;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
}

.edit-btn {
	font-size: 28rpx;
	color: #667eea;
	padding: 15rpx 25rpx;
	background: #f0f3ff;
	border-radius: 20rpx;
}

.filter-tabs {
	display: flex;
	background: white;
	border-radius: 12rpx;
	margin-bottom: 30rpx;
	overflow: hidden;
}

.filter-tab {
	flex: 1;
	text-align: center;
	padding: 25rpx;
	font-size: 28rpx;
	color: #666;
	transition: all 0.3s;
}

.filter-tab.active {
	color: #ff6b6b;
	background: #fff5f5;
	font-weight: bold;
}

.empty-state {
	background: white;
	border-radius: 16rpx;
	padding: 100rpx 30rpx;
	text-align: center;
}

.empty-image {
	width: 200rpx;
	height: 200rpx;
	margin-bottom: 30rpx;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
	display: block;
	margin-bottom: 40rpx;
}

.browse-btn {
	background: #ff6b6b;
	color: white;
	border: none;
	border-radius: 25rpx;
	padding: 20rpx 50rpx;
	font-size: 28rpx;
}

.items-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20rpx;
}

.collection-item {
	background: white;
	border-radius: 16rpx;
	padding: 25rpx;
	position: relative;
}

.item-image {
	width: 100%;
	height: 200rpx;
	border-radius: 8rpx;
	margin-bottom: 15rpx;
}

.item-info {
	display: flex;
	flex-direction: column;
	gap: 8rpx;
}

.item-name {
	font-size: 26rpx;
	font-weight: bold;
	color: #333;
}

.item-price {
	font-size: 24rpx;
	color: #ff6b6b;
	font-weight: bold;
}

.item-time {
	font-size: 20rpx;
	color: #999;
}

.delete-btn {
	position: absolute;
	top: 15rpx;
	right: 15rpx;
	width: 40rpx;
	height: 40rpx;
	background: #ff4d4f;
	color: white;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24rpx;
	font-weight: bold;
}

.batch-actions {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: white;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 25rpx 30rpx;
	border-top: 1rpx solid #eee;
}

.select-all {
	display: flex;
	align-items: center;
}

.checkbox-label {
	display: flex;
	align-items: center;
	gap: 15rpx;
	font-size: 26rpx;
	color: #333;
}

.action-buttons {
	display: flex;
	gap: 20rpx;
}

.batch-delete,
.batch-clear {
	background: #ff4d4f;
	color: white;
	border: none;
	border-radius: 20rpx;
	padding: 20rpx 30rpx;
	font-size: 26rpx;
}

.batch-clear {
	background: #999;
}
</style>